<template>
  <div class="impress" :data="user.id">
    <ul class="person">
      <li class="HYShuaiXianTiW"><span v-if="impress.length==0">暂时还未收获到印象</span><span v-if="impress.length!=0" v-for="(items,key) of impress" :key="key">{{items.impressionName}}&nbsp;&nbsp;{{items.impressionNum}}</span></li>
    </ul>
  </div>
</template>
<script>
import {  getServerHost,
  preventMove,
  GetRequest,
  checkMobile,
  checkQq} from '@/assets/lib/tool.js'
export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      openid: GetRequest().openid,
      userImpressionListUrl: '/wxjx/goddess/common/impression/userImpressionList',
      impress: []
    }
  },
  watch: {
    user(val) {
      this.userImpressionList();
      return val;
    }
  },
  mounted() {
    this.$nextTick(() => {

    })
  },
  methods: {
    //根据id获取自己的印象
    userImpressionList() {
      var vm = this;
      this.$http.get(getServerHost() + this.userImpressionListUrl, {
        params: {
          voteUserId: this.user.id
        }
      }).then(rs => {
        // console.log(rs);
        rs = rs.data;
        if ('200' == rs.code) {
          this.impress = rs.res;
        }
      }
      )
    },
  },
}
</script>
<style lang="less" scoped>
.impress {
  header {
    font-weight: bold;
  }
  padding-top: 30px;
  .person {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    li {
      width: 100%;
      padding: 0 20px;
      line-height: 1.5em;
      font-size: 30px;
      font-weight: bold;
      span {
        margin: 0 20px;
      }
    }
    li {
      span:nth-child(1) {
        color: #39b7ff;
      }
    }
    li {
      span:nth-child(2) {
        color: #c149ff;
      }
    }
    li {
      span:nth-child(3) {
        color: #ffb005;
      }
    }
    li {
      span:nth-child(4) {
        color: #469f1f;
      }
    }
    li {
      span:nth-child(5) {
        color: #411f9f;
      }
    }
    li {
      span:nth-child(6) {
        color: #861f9f;
      }
    }
  }
}
</style>
